<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="Description"
        content="flv合并工具 bilibili 哔哩哔哩 B站 下载助手 帮你下载版权受限（能看不能缓存）的 番剧 视频 现在也能下载 音频 音乐 封面 歌词 Anything to QR code 通过右键菜单或地址栏按钮将当前页面地址、选中的文本、链接、图片地址等文本内容生成二维码，也可以解析页面中的二维码图片，完全离线可用，不依赖任何远程文件和服务，内存占用小，界面简洁">
  <title>flv文件合并工具 - B站下载助手 - Anything to QR code</title>
  <link rel="shortcut icon" href="/bilibili/favicon.png"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style>
    .spinner {
      width: 70px;
      text-align: center;
    }

    .spinner > div {
      width: 18px;
      height: 18px;
      background-color: #fff;

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
      animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    }

    .spinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .spinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes sk-bouncedelay {
      0%, 80%, 100% {
        -webkit-transform: scale(0)
      }
      40% {
        -webkit-transform: scale(1.0)
      }
    }

    @keyframes sk-bouncedelay {
      0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }
      40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
      }
    }

    h3, h1, div, p, body, html {
      margin: 0;
      padding: 0;
    }

    body, input, button, a {
      font-size: 14px;
    }

    .flv-item {
      border: 1px solid #ccc;
      margin-top: 8px;
      padding: 4px 8px;
      background-color: #eee;
      cursor: move;
    }

    .flv-item:hover {
      background-color: #ccc;
    }

    .btn {
      text-decoration: none !important;
      color: #fff !important;
      border-radius: 3px;
      padding: 8px 20px;
      background-color: rgb(58, 117, 215);
      display: inline-block;
      margin: 16px 0;
      font-size: 14px;
      cursor: pointer;
    }

    #container {
      padding: 18px 100px;
    }

    #fileChooser {
      display: none;
    }

    .my-works {
      margin-top: 36px;
    }

    .dialog-mask {
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 9;
    }

    .dialog-container {
      background: #fff;
      border-radius: 8px;
      box-shadow: 2px 2px 20px #000;
      padding: 16px;
    }

    .dialog-btn {
      color: #fff;
      border-radius: 3px;
      padding: 4px 8px;
      background: rgb(58, 117, 215);
      font-size: 16px;
      cursor: pointer;
      border: 0 none;
    }

    .dialog-btn.btn-grey {
      color: #333;
      background-color: #fff;
    }

    .dialog-header {
      margin-bottom: 8px;
    }

    .dialog-header h3 {
      font-size: 16px;
      font-weight: bold;
    }

    .dialog-body {
      margin-bottom: 8px;
      font-size: 16px;
    }

    .dialog-body a {
      font-size: 16px;
    }

    .dialog-footer {
      text-align: right;
    }
  </style>
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement('script');
      hm.src = 'https://hm.baidu.com/hm.js?8488923ee2e17d0056bcd6cb89814efb';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</head>
<body>
<div id="browser-alert" style="display: none;" class="dialog-mask">
  <div class="alert-dialog dialog-container">
    <div class="dialog-header">
      <h3>提示</h3>
    </div>
    <div class="dialog-body">
      您的浏览器不支持某些本工具需要的功能，建议您使用最新版的Chrome浏览器(<a href="https://pc.qq.com/detail/1/detail_2661.html"
                                               target="_blank">下载地址</a>)访问本工具，谢谢
    </div>
    <div class="dialog-footer">
      <button class="dialog-btn">知道了</button>
    </div>
  </div>
</div>
<div id="container">
  <h1>flv文件合并工具</h1>
  <div class="files-area">
    <input id="fileChooser" @change="setFlvs" type="file" multiple accept=".flv">
    <label class="btn" for="fileChooser">选择flv文件(可多选)</label>
  </div>
  <h3 v-if="flvs.length > 1">已选择的flv(拖拽可排序)：</h3>
  <draggable v-model="flvs" @start="drag=true" @end="drag=false">
    <div class="flv-item" v-for="flv in flvs" :key="flv.name">{{flv.name}}</div>
  </draggable>
  <span v-if="flvs.length > 1" href="#nogo" @click="saveDailogShow=true" class="btn">合并</span>
  <div class="my-works">
    <h3>其他工具</h3>
    <ul>
      <li><a href="https://csser.top"
             title="bilibili 哔哩哔哩 B站 下载助手" target="_blank">B站下载助手</a></li>
      <li><a href="https://chrome.google.com/webstore/detail/calkaljlpglgogjfcidhlmmlgjnpmnmf" title="好用的二维码生成和解析工具"
             target="_blank">Anything to QR code</a></li>
    </ul>
  </div>
  <prompt-dialog v-model="saveDailogShow" msg="请输入想要保存的文件名：" @action="mergeFlvs($event)"></prompt-dialog>
  <overlay-loading :loading="loading"></overlay-loading>
</div>
<script>
  (function() {
    var supportsAsyncFunctions = (() => {
      try {
        new Function('async () => {}')();
      } catch (error) {
        return false;
      }

      return true;
    })();
    var alert = document.getElementById('browser-alert');
    if (!supportsAsyncFunctions) {
      alert.style.display = 'flex';
    }
    alert.querySelector('.dialog-btn').addEventListener('click', function() {
      alert.style.display = 'none';
    });
  })();
</script>
<script src="flv-helper.js"></script>
<script src="sortable.min.js"></script>
<script src="vue.min.js"></script>
<script src="vuedraggable.min.js"></script>
<script src="merge.js?v=1"></script>
</body>
</html>
